<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>企业列表 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    body {
      background-color: #f8f9fa;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      padding-bottom: 60px;
    }
    
    /* 顶部导航 */
    .top-nav {
      background-color: white;
      padding: 12px 15px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      text-align: center;
      margin: 0;
    }
    
    /* 筛选容器 */
    .filter-container {
      background-color: white;
      border-bottom: 1px solid #eee;
      overflow: hidden;
      transition: max-height 0.3s ease;
    }
    
    .filter-container.collapsed {
      max-height: 150px;
    }
    
    .filter-container.expanded {
      max-height: 800px;
    }
    
    /* 基础搜索区 */
    .basic-filter {
      padding: 12px 15px;
      border-bottom: 1px solid #eee;
    }
    
    .search-box {
      position: relative;
      margin-bottom: 10px;
    }
    
    .search-input {
      width: 100%;
      padding: 10px 15px 10px 40px;
      border-radius: 8px;
      border: 1px solid #ddd;
      font-size: 14px;
    }
    
    .search-icon {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: #999;
    }
    
    /* 筛选切换按钮 */
    .filter-toggle {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 8px 15px;
      color: #0d6efd;
      font-size: 14px;
      cursor: pointer;
      border-bottom: 1px solid #eee;
    }
    
    .filter-toggle i {
      margin-left: 5px;
      transition: transform 0.3s ease;
    }
    
    .filter-toggle.collapsed i {
      transform: rotate(180deg);
    }
    
    /* 高级筛选区 */
    .advanced-filters {
      padding: 10px 15px;
    }
    
    .filter-section {
      margin-bottom: 15px;
    }
    
    .filter-title {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 8px;
      color: #333;
    }
    
    /* 标签式筛选 */
    .tag-filter {
      display: flex;
      overflow-x: auto;
      padding-bottom: 5px;
      gap: 8px;
    }
    
    .tag-item {
      padding: 5px 12px;
      border-radius: 16px;
      font-size: 13px;
      white-space: nowrap;
      background-color: #f0f0f0;
      color: #333;
      cursor: pointer;
    }
    
    .tag-item.active {
      background-color: #0d6efd;
      color: white;
    }
    
    /* 滑块式筛选 */
    .slider-filter {
      padding: 5px 0;
    }
    
    .slider-info {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: #666;
      margin-bottom: 5px;
    }
    
    .range-slider {
      width: 100%;
      height: 6px;
      -webkit-appearance: none;
      appearance: none;
      background: #e0e0e0;
      border-radius: 3px;
      outline: none;
    }
    
    .range-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #0d6efd;
      cursor: pointer;
    }
    
    /* 复选框筛选 */
    .checkbox-filter {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    
    .checkbox-item {
      flex: 0 0 calc(50% - 5px);
      display: flex;
      align-items: center;
      font-size: 13px;
      color: #333;
    }
    
    .checkbox-item input {
      margin-right: 5px;
    }
    
    /* 下拉式筛选 */
    .select-filter {
      position: relative;
    }
    
    .custom-select {
      width: 100%;
      padding: 8px 35px 8px 15px;
      border-radius: 8px;
      border: 1px solid #ddd;
      background-color: white;
      appearance: none;
      font-size: 14px;
    }
    
    .select-arrow {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: #999;
      pointer-events: none;
    }
    
    /* 筛选操作按钮 */
    .filter-actions {
      display: flex;
      gap: 10px;
      padding: 10px 15px;
      background-color: #f9fafb;
      border-top: 1px solid #eee;
    }
    
    .filter-btn {
      flex: 1;
      padding: 8px 0;
      font-size: 14px;
      border-radius: 8px;
    }
    
    /* 列表样式切换器 */
    .view-switch {
      display: flex;
      justify-content: flex-end;
      padding: 10px 15px;
      background-color: white;
      border-bottom: 1px solid #eee;
    }
    
    .switch-btn {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      background-color: #f5f5f5;
      color: #666;
      margin-left: 5px;
    }
    
    .switch-btn.active {
      background-color: #0d6efd;
      color: white;
    }
    
    /* 企业列表样式 */
    .enterprise-list {
      padding: 10px 15px;
    }
    
    .list-section-title {
      font-size: 16px;
      font-weight: 600;
      margin: 15px 0 10px;
      color: #333;
    }
    
    .enterprise-item {
      background-color: white;
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    
    .enterprise-header {
      position: relative;
      height: 140px;
    }
    
    .enterprise-banner {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .no-banner {
      width: 100%;
      height: 100%;
      background-color: #e9f5ff;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #0d6efd;
      font-size: 32px;
    }
    
    .enterprise-logo {
      position: absolute;
      bottom: -30px;
      left: 15px;
      width: 60px;
      height: 60px;
      border-radius: 8px;
      border: 3px solid white;
      object-fit: cover;
    }
    
    .enterprise-body {
      padding: 35px 15px 15px;
    }
    
    .enterprise-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 5px;
      color: #333;
    }
    
    .enterprise-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      font-size: 12px;
      color: #666;
      margin-bottom: 8px;
    }
    
    .enterprise-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .follow-btn {
      font-size: 13px;
      padding: 5px 15px;
      border-radius: 20px;
    }
    
    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: white;
      border-top: 1px solid #eee;
      display: flex;
      padding: 8px 0;
      z-index: 1000;
    }
    
    .nav-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #999;
      font-size: 10px;
    }
    
    .nav-item.active {
      color: #0d6efd;
    }
    
    .nav-icon {
      font-size: 20px;
      margin-bottom: 3px;
    }
    
    /* 筛选结果提示 */
    .filter-result {
      padding: 8px 15px;
      background-color: #eef7ff;
      color: #0d6efd;
      font-size: 13px;
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .active-filters {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      padding: 8px 15px;
      background-color: white;
      border-bottom: 1px solid #eee;
    }
    
    .active-filter-tag {
      display: flex;
      align-items: center;
      padding: 3px 10px;
      background-color: #eef7ff;
      color: #0d6efd;
      border-radius: 12px;
      font-size: 12px;
    }
    
    .active-filter-tag i {
      margin-left: 5px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <div class="top-nav d-flex justify-content-between align-items-center">
    <button class="btn btn-link p-0 text-dark">
      <i class="fa fa-arrow-left"></i>
    </button>
    <h1 class="nav-title">企业列表</h1>
    <button class="btn btn-link p-0 text-dark">
      <i class="fa fa-search"></i>
    </button>
  </div>
  
  <!-- 筛选容器 -->
  <div class="filter-container collapsed">
    <!-- 基础搜索区 -->
    <div class="basic-filter">
      <div class="search-box">
        <i class="fa fa-search search-icon"></i>
        <input type="text" class="search-input" placeholder="搜索企业名称或关键词...">
      </div>
      
      <div class="tag-filter">
        <div class="tag-item active">全部企业</div>
        <div class="tag-item">科技</div>
        <div class="tag-item">金融</div>
        <div class="tag-item">教育</div>
        <div class="tag-item">医疗</div>
        <div class="tag-item">零售</div>
      </div>
    </div>
    
    <!-- 筛选展开/收起按钮 -->
    <div class="filter-toggle collapsed" id="filterToggle">
      <span>高级筛选</span>
      <i class="fa fa-chevron-down"></i>
    </div>
    
    <!-- 高级筛选区 -->
    <div class="advanced-filters">
      <!-- 企业规模筛选 -->
      <div class="filter-section">
        <div class="filter-title">企业规模</div>
        <div class="checkbox-filter">
          <label class="checkbox-item">
            <input type="checkbox"> 1-50人
          </label>
          <label class="checkbox-item">
            <input type="checkbox"> 51-200人
          </label>
          <label class="checkbox-item">
            <input type="checkbox"> 201-500人
          </label>
          <label class="checkbox-item">
            <input type="checkbox"> 501-1000人
          </label>
          <label class="checkbox-item">
            <input type="checkbox"> 1000人以上
          </label>
        </div>
      </div>
      
      <!-- 成立时间筛选 -->
      <div class="filter-section">
        <div class="filter-title">成立时间</div>
        <div class="tag-filter">
          <div class="tag-item">1年以内</div>
          <div class="tag-item">1-3年</div>
          <div class="tag-item active">3-5年</div>
          <div class="tag-item">5-10年</div>
          <div class="tag-item">10年以上</div>
        </div>
      </div>
      
      <!-- 距离筛选 -->
      <div class="filter-section">
        <div class="filter-title">距离范围</div>
        <div class="slider-filter">
          <div class="slider-info">
            <span>当前: <span id="distanceValue">5</span>公里</span>
            <span>50公里</span>
          </div>
          <input type="range" min="1" max="50" value="5" class="range-slider" id="distanceSlider">
        </div>
      </div>
      
      <!-- 排序方式筛选 -->
      <div class="filter-section">
        <div class="filter-title">排序方式</div>
        <div class="select-filter">
          <select class="custom-select">
            <option value="recommend">推荐排序</option>
            <option value="distance">距离最近</option>
            <option value="newest">最新加入</option>
            <option value="popular">人气最高</option>
          </select>
          <i class="fa fa-chevron-down select-arrow"></i>
        </div>
      </div>
    </div>
    
    <!-- 筛选操作按钮 -->
    <div class="filter-actions">
      <button class="btn btn-outline-secondary filter-btn" id="resetFilters">重置</button>
      <button class="btn btn-primary filter-btn" id="applyFilters">应用筛选</button>
    </div>
  </div>
  
  <!-- 筛选结果提示 -->
  <div class="filter-result">
    <span>找到 24 家符合条件的企业</span>
    <span id="showActiveFilters">已选 2 项</span>
  </div>
  
  <!-- 已选筛选条件 -->
  <div class="active-filters">
    <div class="active-filter-tag">
      3-5年 <i class="fa fa-times"></i>
    </div>
    <div class="active-filter-tag">
      距离: 5公里 <i class="fa fa-times"></i>
    </div>
  </div>
  
  <!-- 列表样式切换器 -->
  <div class="view-switch">
    <button class="switch-btn active" id="cardView">
      <i class="fa fa-th-large"></i>
    </button>
    <button class="switch-btn" id="listView">
      <i class="fa fa-list"></i>
    </button>
    <button class="switch-btn" id="gridView">
      <i class="fa fa-th"></i>
    </button>
  </div>
  
  <!-- 企业列表 -->
  <div class="enterprise-list">
    <h2 class="list-section-title">推荐企业</h2>
    
    <div class="enterprise-item">
      <div class="enterprise-header">
        <img src="https://picsum.photos/600/300?random=1" class="enterprise-banner" alt="企业封面">
        <img src="https://picsum.photos/200/200?random=10" class="enterprise-logo" alt="企业logo">
      </div>
      <div class="enterprise-body">
        <h3 class="enterprise-title">科技创新有限公司</h3>
        <div class="enterprise-meta">
          <span><i class="fa fa-map-marker me-1"></i> 北京市海淀区 · 3.2公里</span>
          <span><i class="fa fa-building me-1"></i> 500-1000人</span>
          <span><i class="fa fa-clock-o me-1"></i> 成立于2018年</span>
        </div>
        <div class="enterprise-actions">
          <button class="btn btn-primary follow-btn">关注</button>
          <button class="btn btn-outline-primary follow-btn">联系</button>
        </div>
      </div>
    </div>
    
    <div class="enterprise-item">
      <div class="enterprise-header">
        <div class="no-banner">
          <i class="fa fa-bank"></i>
        </div>
        <img src="https://picsum.photos/200/200?random=11" class="enterprise-logo" alt="企业logo">
      </div>
      <div class="enterprise-body">
        <h3 class="enterprise-title">未来教育集团</h3>
        <div class="enterprise-meta">
          <span><i class="fa fa-map-marker me-1"></i> 上海市浦东新区 · 4.7公里</span>
          <span><i class="fa fa-building me-1"></i> 1000人以上</span>
          <span><i class="fa fa-clock-o me-1"></i> 成立于2016年</span>
        </div>
        <div class="enterprise-actions">
          <button class="btn btn-primary follow-btn">关注</button>
          <button class="btn btn-outline-primary follow-btn">联系</button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <a href="#" class="nav-item">
      <i class="fa fa-home nav-icon"></i>
      <span>首页</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-compass nav-icon"></i>
      <span>发现</span>
    </a>
    <a href="#" class="nav-item active">
      <i class="fa fa-building nav-icon"></i>
      <span>企业</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-user nav-icon"></i>
      <span>我的</span>
    </a>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 筛选面板展开/收起
    const filterContainer = document.querySelector('.filter-container');
    const filterToggle = document.getElementById('filterToggle');
    
    filterToggle.addEventListener('click', function() {
      filterContainer.classList.toggle('collapsed');
      filterContainer.classList.toggle('expanded');
      this.classList.toggle('collapsed');
    });
    
    // 距离滑块交互
    const distanceSlider = document.getElementById('distanceSlider');
    const distanceValue = document.getElementById('distanceValue');
    
    distanceSlider.addEventListener('input', function() {
      distanceValue.textContent = this.value;
    });
    
    // 标签筛选交互
    document.querySelectorAll('.tag-item').forEach(tag => {
      tag.addEventListener('click', function() {
        // 检查是否是单选组（有active类的组）
        if(this.parentElement.querySelector('.tag-item.active')) {
          this.parentElement.querySelectorAll('.tag-item').forEach(t => {
            t.classList.remove('active');
          });
        }
        this.classList.add('active');
      });
    });
    
    // 应用筛选
    document.getElementById('applyFilters').addEventListener('click', function() {
      // 模拟筛选应用，关闭筛选面板
      filterContainer.classList.add('collapsed');
      filterContainer.classList.remove('expanded');
      filterToggle.classList.add('collapsed');
      
      // 更新筛选结果计数（实际应用中根据筛选条件计算）
      updateFilterResults();
    });
    
    // 重置筛选
    document.getElementById('resetFilters').addEventListener('click', function() {
      // 重置所有筛选条件
      document.querySelectorAll('.tag-item').forEach((tag, index) => {
        tag.classList.toggle('active', index === 0);
      });
      
      document.querySelectorAll('.checkbox-filter input').forEach(checkbox => {
        checkbox.checked = false;
      });
      
      distanceSlider.value = 5;
      distanceValue.textContent = 5;
      
      document.querySelector('.custom-select').selectedIndex = 0;
    });
    
    // 移除单个筛选条件
    document.querySelectorAll('.active-filter-tag i').forEach(icon => {
      icon.addEventListener('click', function() {
        this.parentElement.remove();
        updateFilterCount();
      });
    });
    
    // 更新筛选结果计数
    function updateFilterResults() {
      // 实际应用中根据筛选条件计算结果数量
      const resultCount = Math.floor(Math.random() * 30) + 5;
      document.querySelector('.filter-result span:first-child').textContent = 
        `找到 ${resultCount} 家符合条件的企业`;
      
      updateFilterCount();
    }
    
    // 更新已选筛选条件数量
    function updateFilterCount() {
      const activeCount = document.querySelectorAll('.active-filter-tag').length;
      document.getElementById('showActiveFilters').textContent = `已选 ${activeCount} 项`;
    }
    
    // 列表视图切换
    const cardViewBtn = document.getElementById('cardView');
    const listViewBtn = document.getElementById('listView');
    const gridViewBtn = document.getElementById('gridView');
    
    cardViewBtn.addEventListener('click', function() {
      updateViewButtons(cardViewBtn);
      // 在实际应用中切换不同视图的企业列表
    });
    
    listViewBtn.addEventListener('click', function() {
      updateViewButtons(listViewBtn);
      // 在实际应用中切换不同视图的企业列表
    });
    
    gridViewBtn.addEventListener('click', function() {
      updateViewButtons(gridViewBtn);
      // 在实际应用中切换不同视图的企业列表
    });
    
    function updateViewButtons(activeBtn) {
      [cardViewBtn, listViewBtn, gridViewBtn].forEach(btn => {
        btn.classList.remove('active');
      });
      activeBtn.classList.add('active');
    }
    
    // 关注按钮交互
    document.querySelectorAll('.follow-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        if (this.textContent.trim() === '关注') {
          this.textContent = '已关注';
          this.classList.remove('btn-primary');
          this.classList.add('btn-success');
        } else if (this.textContent.trim() === '已关注') {
          this.textContent = '关注';
          this.classList.remove('btn-success');
          this.classList.add('btn-primary');
        }
      });
    });
  </script>
</body>
</html>
